<template>
    <view>
        <uni-nav-bar statusBar backgroundColor='#3f6efe' color='#fff'>
            <view class="w-100p f-28 flex-c flex-aic">我的报账</view>
        </uni-nav-bar>
        <view class="nav p-l-30 p-r-30 p-b-20 p-t-20">
            <uni-segmented-control :current="type" :values="items" @clickItem="onClickItem" styleType="button"
                                   activeColor="#dd524d"></uni-segmented-control>
        </view>
        <uniSwipeAcion>
            <uni-transition mode-class="fade" :show="true" v-for="(item,index) in list" :key="index">
                <view class="list bs-b">
                    <uniSwipeAcionItem :disabled='type!==0' :right-options="options1" :left-options="options2"
                                       @click="onClick($event,index,item)">
                        <view class="title">
                            <uni-tag :text="getLabelByValue(item.type)" type="primary" />
                            <text class="f-25" style="color: red;">￥{{item.money}}</text>
                        </view>
                        <view class="main">
                            <view class="desc"><text>创建时间:</text><text>{{parseTime(item.createTime)}}</text></view>
                            <view class="desc"><text>使用时间:</text><text>{{parseTime(item.endTime)}}</text></view>
                            <view class="images" @click="previewImage(item.invoice)">
                                <view class="tit">发票</view>
                                <image class='images' mode="aspectFit" :src="item.invoice"></image>
                            </view>
                            <textShrink :text="'报销事由：'+item.reason" />

<!--                            <view v-if="type!==0" style="background-color: #f5f5f5;" class="br-12 m-t-10 m-t-5">-->
<!--                                <view class="images" v-if="item.ac_images.length>0">-->
<!--                                    <view class="f-22 p-l-10">打款凭证</view>-->
<!--                                    <htzImageUpload class='images' :add='false' :value="item.ac_images" :remove='false'></htzImageUpload>-->
<!--                                </view>-->
<!--                                <view class="desc p-t-15 p-b-15 p-l-10 p-r-20" v-if="item.reason"><textShrink :size='22' :text="'报销事由：'+item.reason" /></view>-->
<!--                            </view>-->
                        </view>
                    </uniSwipeAcionItem>
                </view>
            </uni-transition>
        </uniSwipeAcion>
        <pinapp-empty-page v-if="list.length===0"></pinapp-empty-page>

        <block v-if="list.length!==0">
            <view class="p-b-100">
                <uni-load-more :status="status"></uni-load-more>
            </view>
        </block>

        <!-- 悬浮按钮 -->
        <uni-fab v-show='type===0' ref="fab" :content='content' horizontal='right' @trigger='trigger' />
    </view>
</template>

<script>
import textShrink from '@/components/saber-textShrink/textShrink.vue'
import htzImageUpload from '@/components/htz-image-upload/htz-image-upload.vue'
import pinappEmptyPage from "@/components/pinapp-empty-page/pinapp-empty-page.vue"
import uniSwipeAcion from '@/uni_modules/uni-swipe-action/components/uni-swipe-action/uni-swipe-action'
import uniSwipeAcionItem from '@/uni_modules/uni-swipe-action/components/uni-swipe-action-item/uni-swipe-action-item'
import { deleteBpm } from "@/api/bpm/bpm"
import {getMyBpm} from "../api/bpm/bpm";
import {getDict} from "../api/system/system";
import {parseTime} from "../utils/ruoyi";
export default {
    components: {
        textShrink,
        htzImageUpload,
        pinappEmptyPage,
        uniSwipeAcion,
        uniSwipeAcionItem
    },
    data() {
        return {
            options1: [{
                text: '取消',
                style: {
                    backgroundColor: '#dd524d'
                }
            }],
            options2: [{
                text: '编辑',
                style: {
                    backgroundColor: '#007aff'
                }
            }],
            type: 0, //切换索引
            items: ['我的申请', '已通过', '已驳回'],
            imageStyles: {
                border: {
                    radius: '10'
                }
            },
            content: [{
                iconPath: '../../static/images/book.png',
                text: '记一笔'
            }],
            params: {
                pageNo: 1,
                pageSize: 5,
                status: '',
                result: '',
            },
            list: [],
            dictList: [],
            total: 0,
            status: 'more'
        }
    },
    created() {
        uni.$on('reload', () => {
            // 调用 getList() 方法
            this.getList();
        });

        uni.$on('add', item => {
            this.list.unshift(item)
        })
    },
    onLoad(e) {
        this.getList({
            pageNo: 1,
            pageSize: 5
        })
        this.getDictList();
    },
    onReachBottom() {
        this.getList(this.params)
    },
    methods: {
        parseTime,
        previewImage(url) {
            uni.previewImage({
                urls: [url],
                current: url,
            });
        },
        getLabelByValue(value) {
            const typeMapping = {};
            this.dictList.forEach(item => {
                typeMapping[item.value] = item.label;
            });

            return typeMapping[value] || '未知类型';
        },
        getDictList(){
            getDict().then(res => {
                this.dictList = res.data.list;
            });
        },
        onClick(e, index, item) {
            if (e.position === 'left') {
                uni.navigateTo({
                    url: `/pages/bpm/reimbursement?id=${item.id}`,
                })
            } else {
                deleteBpm({id: item.id,reason: '主动取消，原因未知'}).then(res => {
                    uni.showToast({
                        title: res.message,
                        icon: 'none'
                    })
                    this.list.splice(index, 1)
                })
            }
        },
        itemEdit(item) {
            console.log()
        },
        onClickItem(e) {
            if (this.type !== e.currentIndex) {
                this.list = []
                this.type = e.currentIndex;
                this.getList()
            }
        },
        trigger(e) {
            if (e.index === 0) {
                uni.navigateTo({
                    url: '/pages/bpm/reimbursement?type=add'
                })
            }
        },
        getList(e) {
            let defaultParams = {
                pageNo: 1,
                pageSize: 50
            };
            // 如果传入的参数 e 为 undefined，则使用默认参数
            let mergedParams = typeof e === 'undefined' ? defaultParams : e;

            // 合并默认参数和其他参数
            let params = Object.assign({}, defaultParams, mergedParams);

            // 设置不同的状态
            this.status = 'loading';
            if (this.type === 0) {
                params.result = 1;
            } else if (this.type === 1) {
                params.result = 2;
            } else {
                params.result = 3;
            }
            // 调用 getMyBpm 函数
            getMyBpm({ params }).then(res => {
                this.list = res.data.list;
                this.params.pageNo++;
                this.total = res.data.total;

                if (this.list.length >= this.total) {
                    this.status = 'no-more';
                } else {
                    this.status = 'more';
                }
            });
        }

    }
}
</script>

<style>
page {
    background-color: white;
}
</style>
<style lang="scss" scoped>
.nav {
  position: sticky;
  top: 0;
  z-index: 999;
  background-color: #fff;
}

.list {
  overflow: hidden;
  margin: 50upx 30upx;
  // box-shadow: 0 0 10upx 2upx rgba(0, 0, 0, .1);
  padding: 0 2upx 2upx 2upx;

  .title {
    height: 70upx;
    background-color: #f8f8f8;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20upx;
  }

  .main {
    background-color: white;
    padding: 25upx;

    .desc {
      line-height: 1.9;
      display: flex;
      justify-content: space-between;
    }

    .images {
      padding: 15upx 0;

      .tit {
        line-height: 2;
      }
    }
  }
}

.images /deep/ .htz-image-upload-Item{
  width: 120upx;
  height: 120upx;
}
</style>
